Highstock হলো Highcharts এর একটি বিশেষ সংস্করণ যা সময়ভিত্তিক (time-series) ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। এটি মূলত স্টক মার্কেট, ফিনান্সিয়াল ডেটা, বা অন্য কোনো ডেটা যা সময়ের সাথে পরিবর্তিত হয়, সেটি প্রদর্শন করার জন্য উপযোগী। Highstock ব্যবহারের মাধ্যমে আপনি রিয়েল-টাইম ডেটা আপডেট, জুম এবং প্যানিং ফিচার সহ সময়ভিত্তিক চার্ট তৈরি করতে পারবেন।
এখানে আমরা দেখব কিভাবে Angular অ্যাপ্লিকেশনে Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করা যায়।
প্রথমে, আপনাকে Highcharts এবং Highstock লাইব্রেরি ইনস্টল করতে হবে, কারণ Highstock Highcharts এর ওপর ভিত্তি করে কাজ করে।
আপনি npm ব্যবহার করে highcharts এবং highcharts/highstock লাইব্রেরি ইনস্টল করতে পারেন।
npm install highcharts --save
npm install highcharts-angular --save
এটি Highcharts এবং Highstock-এর প্রয়োজনীয় প্যাকেজ আপনার প্রজেক্টে ইন্সটল করবে।
Angular প্রজেক্টে Highstock ব্যবহারের জন্য highcharts এবং highcharts-angular মডিউল ইমপোর্ট করতে হবে। app.module.ts ফাইলে HighchartsChartModule যোগ করুন।
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular'; // Highcharts মডিউল ইমপোর্ট
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HighchartsChartModule // Highcharts মডিউল ব্যবহার করা
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Highstock ব্যবহার করে সময়ভিত্তিক ডেটা প্রদর্শন করতে, আপনাকে ডেটা টাইমস্ট্যাম্প সহ প্রস্তুত করতে হবে এবং Highstock এর series এ টাইমস্ট্যাম্প সহ ডেটা ইনজেক্ট করতে হবে।
import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts/highstock'; // Highstock ইমপোর্ট
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
Highcharts = Highcharts;
chartOptions: any;
ngOnInit() {
this.chartOptions = {
chart: {
type: 'line'
},
title: {
text: 'সময়ভিত্তিক ডেটা প্রদর্শন'
},
rangeSelector: {
selected: 1 // রেঞ্জ সিলেক্টর দিয়ে চার্টের সময়কাল নির্বাচন
},
xAxis: {
type: 'datetime' // টাইমস্ট্যাম্প ডেটা রেন্ডারিং
},
series: [{
name: 'Stock Price',
data: [
[Date.UTC(2024, 0, 1), 29.9], // ২০২৪-০১-০১ তারিখে ২৯.৯
[Date.UTC(2024, 0, 2), 31.9], // ২০২৪-০১-০২ তারিখে ৩১.৯
[Date.UTC(2024, 0, 3), 35.1], // ২০২৪-০১-০৩ তারিখে ৩৫.১
[Date.UTC(2024, 0, 4), 40.5], // ২০২৪-০১-০৪ তারিখে ৪০.৫
[Date.UTC(2024, 0, 5), 42.2], // ২০২৪-০১-০৫ তারিখে ৪২.২
[Date.UTC(2024, 0, 6), 45.3], // ২০২৪-০১-০৬ তারিখে ৪৫.৩
]
}]
};
}
}
<div style="height: 400px;">
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
style="width: 100%; height: 100%; display: block;">
</highcharts-chart>
</div>
Date.UTC(): Highcharts টাইমস্ট্যাম্প ডেটা প্রদর্শনের জন্য Date.UTC() ফাংশন ব্যবহার করে টাইমস্ট্যাম্প তৈরি করা হয়। এটি একটি বিশেষ ফাংশন যা টাইমস্ট্যাম্প হিসাবে একটি UTC তারিখ তৈরি করে।rangeSelector: rangeSelector এর মাধ্যমে আপনি চার্টে একটি সময় সীমা নির্বাচন করতে পারেন (যেমন ১ দিন, ১ সপ্তাহ, ১ মাস ইত্যাদি)। এটি ব্যবহারকারীকে চার্টের বিভিন্ন সময়কাল দেখানোর সুযোগ দেয়।xAxis.type: 'datetime': xAxis এর type এ 'datetime' ব্যবহার করে আমরা নিশ্চিত করি যে x-axis তে টাইমস্ট্যাম্পের ভিত্তিতে ডেটা রেন্ডার হবে।series: series এ আমাদের মূল ডেটা থাকে, যেটি একটি অ্যারে হিসেবে টাইমস্ট্যাম্প এবং ডেটা ভ্যালু ধারণ করে।আপনি যদি রিয়েল-টাইম ডেটা হালনাগাদ করতে চান, তবে আপনি WebSocket বা API কলের মাধ্যমে নতুন ডেটা গ্রহণ করে setData() ব্যবহার করে চার্ট আপডেট করতে পারেন।
Highstock ব্যবহার করে আপনি সহজেই সময়ভিত্তিক ডেটা ভিজ্যুয়ালাইজ করতে পারেন। টাইমস্ট্যাম্প ডেটা ইনজেক্ট করার মাধ্যমে আপনি স্টক মার্কেট, ফিনান্সিয়াল ডেটা অথবা সেন্সর ডেটা প্রদর্শন করতে পারেন। Highstock আপনাকে zooming, panning, range selection এবং real-time updates সহ আরও অনেক সুবিধা প্রদান করে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
